<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基本资料</span>
        <el-button style="float: right; padding: 3px 0" type="text"></el-button>
      </div>
      <div class="text item">
        <div class="touxiang">头像：&nbsp;&nbsp;
          <img :src="data.avatarUrl" alt="" style="width:50px;heigth:50px;">
        </div>
        <div>账户名：&nbsp;&nbsp;<el-tag type="success">{{ data.username }}</el-tag>
        </div>
        <div>昵称：&nbsp;&nbsp;{{ data.nickname }}</div>
        <div>邮箱：&nbsp;&nbsp; {{ data.email }}</div>
        <div>手机号：&nbsp;&nbsp; {{ data.phone }}</div>
        <div>地址：&nbsp;&nbsp;{{ data.address }}</div>
        <div>注册时间：&nbsp;&nbsp;{{ data.createTime }}</div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'UserAdmin',

  data () {
    return {
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      data: []
    };
  },

  created () {
    this.request.get("/user/username/" + this.user.username).then(res => {
      if (res.code === '200') {
        this.data = res.data
      }
    })

  },

  methods: {

  },
};
</script>

<style lang="less" scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
  div {
    height: 50px;
    line-height: 50px;
  }
}
.box-card {
  width: 100%;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.touxiang img {
  vertical-align: middle;
}
</style>